<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐私政策 - Surreal Gallery 超现实主义数字藏品平台</title>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        /* 继承首页样式变量 */
        :root {
            --primary: #6a11cb;
            --secondary: #2575fc;
            --accent: #ff2e63;
            --dark: #1a1a2e;
            --light: #f0f0f0;
            --surreal-purple: #8a2be2;
            --surreal-blue: #00b4d8;
            --surreal-pink: #ff6b6b;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, var(--dark) 0%, #16213e 100%);
            color: var(--light);
            overflow-x: hidden;
            min-height: 100vh;
        }

        /* 超现实主义背景元素 */
        .floating-elements {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .floating-element {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
            filter: blur(40px);
            animation: float 15s infinite ease-in-out;
        }

        .floating-element:nth-child(1) {
            width: 300px;
            height: 300px;
            background: var(--surreal-purple);
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .floating-element:nth-child(2) {
            width: 200px;
            height: 200px;
            background: var(--surreal-blue);
            top: 60%;
            right: 10%;
            animation-delay: 3s;
        }

        .floating-element:nth-child(3) {
            width: 250px;
            height: 250px;
            background: var(--surreal-pink);
            bottom: 10%;
            left: 20%;
            animation-delay: 6s;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }

            50% {
                transform: translateY(-20px) rotate(180deg);
            }
        }

        /* 导航栏 */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 5%;
            position: fixed;
            width: 100%;
            z-index: 1000;
            background: rgba(26, 26, 46, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .logo {
            font-size: 28px;
            font-weight: 700;
            background: linear-gradient(45deg, var(--surreal-purple), var(--surreal-blue));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
        }

        nav ul {
            display: flex;
            list-style: none;
        }

        nav ul li {
            margin-left: 30px;
        }

        nav ul li a {
            color: var(--light);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
        }

        nav ul li a:hover {
            color: var(--surreal-pink);
        }

        nav ul li a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background: linear-gradient(45deg, var(--surreal-purple), var(--surreal-blue));
            transition: width 0.3s ease;
        }

        nav ul li a:hover::after {
            width: 100%;
        }

        .cta-button {
            background: linear-gradient(45deg, var(--surreal-purple), var(--surreal-blue));
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4);
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(106, 17, 203, 0.6);
        }

        .cta-button i {
            margin-right: 4px;
        }

        /* 阅读进度条 */
        .reading-progress {
            position: fixed;
            top: 70px;
            left: 0;
            width: 100%;
            height: 3px;
            background: rgba(255, 255, 255, 0.1);
            z-index: 999;
        }

        .reading-progress-bar {
            height: 100%;
            background: linear-gradient(45deg, var(--surreal-purple), var(--surreal-blue));
            width: 0%;
            transition: width 0.3s ease;
        }

        /* 隐私政策容器 */
        .privacy-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 150px 5% 100px;
            display: flex;
            gap: 40px;
        }

        /* 目录导航 */
        .privacy-toc {
            flex: 0 0 250px;
            position: sticky;
            top: 120px;
            height: fit-content;
            max-height: calc(100vh - 140px);
            overflow-y: auto;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .toc-title {
            font-size: 1.2rem;
            margin-bottom: 15px;
            color: var(--surreal-blue);
            font-weight: 600;
        }

        .toc-list {
            list-style: none;
        }

        .toc-item {
            margin-bottom: 10px;
        }

        .toc-link {
            color: var(--light);
            text-decoration: none;
            font-size: 0.95rem;
            opacity: 0.8;
            transition: all 0.3s ease;
            display: block;
            padding: 5px 0;
            border-left: 2px solid transparent;
            padding-left: 10px;
        }

        .toc-link:hover,
        .toc-link.active {
            opacity: 1;
            color: var(--surreal-pink);
            border-left-color: var(--surreal-purple);
        }

        /* 内容区域 */
        .privacy-content {
            flex: 1;
        }

        .privacy-header {
            margin-bottom: 40px;
        }

        .privacy-title {
            font-size: 2.8rem;
            line-height: 1.3;
            margin-bottom: 20px;
            background: linear-gradient(45deg, var(--surreal-purple), var(--surreal-blue), var(--surreal-pink));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .last-updated {
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 0.8;
            font-size: 0.95rem;
            margin-bottom: 30px;
        }

        .privacy-intro {
            font-size: 1.1rem;
            line-height: 1.6;
            opacity: 0.9;
            margin-bottom: 40px;
        }

        /* 章节样式 */
        .privacy-section {
            margin-bottom: 50px;
            scroll-margin-top: 100px;
        }

        .section-title {
            font-size: 1.8rem;
            margin-bottom: 20px;
            color: var(--surreal-blue);
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .section-content {
            font-size: 1.05rem;
            line-height: 1.7;
        }

        .section-content p {
            margin-bottom: 20px;
            opacity: 0.9;
        }

        .section-content ul,
        .section-content ol {
            margin: 20px 0;
            padding-left: 30px;
        }

        .section-content li {
            margin-bottom: 10px;
            opacity: 0.9;
        }

        .section-content strong {
            color: var(--surreal-pink);
        }

        .highlight-box {
            background: rgba(138, 43, 226, 0.1);
            border-left: 4px solid var(--surreal-purple);
            padding: 20px;
            margin: 25px 0;
            border-radius: 0 8px 8px 0;
        }

        .contact-info {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 25px;
            margin-top: 30px;
        }

        .contact-title {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: var(--surreal-blue);
        }

        .contact-details p {
            margin-bottom: 10px;
        }

        /* 页脚 */
        footer {
            background: rgba(0, 0, 0, 0.5);
            padding: 50px 5% 20px;
            margin-top: 100px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-column h3 {
            font-size: 1.2rem;
            margin-bottom: 20px;
            color: var(--surreal-blue);
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column ul li {
            margin-bottom: 10px;
        }

        .footer-column ul li a {
            color: var(--light);
            text-decoration: none;
            opacity: 0.7;
            transition: all 0.3s ease;
        }

        .footer-column ul li a:hover {
            opacity: 1;
            color: var(--surreal-pink);
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .social-link:hover {
            background: var(--surreal-purple);
            transform: translateY(-3px);
        }

        .social-links a {
            text-decoration: none;
            font-size: 1.2rem;
            color: white;
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            opacity: 0.7;
        }

        /* 响应式设计 */
        @media (max-width: 968px) {
            .privacy-title {
                font-size: 2.3rem;
            }

            .privacy-container {
                flex-direction: column;
            }

            .privacy-toc {
                position: static;
                margin-bottom: 30px;
            }
        }

        @media (max-width: 768px) {
            nav ul {
                display: none;
            }

            .privacy-container {
                padding: 130px 5% 80px;
            }

            .privacy-title {
                font-size: 2rem;
            }

            .section-title {
                font-size: 1.5rem;
            }
        }

        @media (max-width: 480px) {
            .privacy-title {
                font-size: 1.7rem;
            }

            .section-content {
                font-size: 1rem;
            }

            .section-title {
                font-size: 1.3rem;
            }
        }
    </style>
</head>

<body>
    <!-- 超现实主义背景元素 -->
    <div class="floating-elements">
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
    </div>

    <!-- 阅读进度条 -->
    <div class="reading-progress">
        <div class="reading-progress-bar" id="progressBar"></div>
    </div>

    <!-- 导航栏 -->
    <header>
        <div class="logo">Surreal Gallery</div>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#featured">特色藏品</a></li>
                <li><a href="#artists">艺术家</a></li>
                <li><a href="news-list.html">新闻动态</a></li>
                <li><a href="privacy.html" class="active">隐私政策</a></li>
            </ul>
        </nav>
        <button class="cta-button">连接钱包</button>
    </header>

    <!-- 隐私政策容器 -->
    <section class="privacy-container">
        <!-- 目录导航 -->
        <aside class="privacy-toc">
            <h3 class="toc-title"><i class="fa fa-list-ul"></i> 目录</h3>
            <ul class="toc-list">
                <li class="toc-item"><a href="#intro" class="toc-link active"><i class="fa fa-file-text-o"></i> 引言</a>
                </li>
                <li class="toc-item"><a href="#data-collection" class="toc-link"><i class="fa fa-database"></i> 信息收集</a>
                </li>
                <li class="toc-item"><a href="#data-use" class="toc-link"><i class="fa fa-cogs"></i> 信息使用</a></li>
                <li class="toc-item"><a href="#data-sharing" class="toc-link"><i class="fa fa-share-alt"></i> 信息共享</a>
                </li>
                <li class="toc-item"><a href="#data-security" class="toc-link"><i class="fa fa-shield"></i> 数据安全</a>
                </li>
                <li class="toc-item"><a href="#user-rights" class="toc-link"><i class="fa fa-user"></i> 用户权利</a></li>
                <li class="toc-item"><a href="#cookies" class="toc-link"><i class="fa fa-pie-chart"></i> Cookie政策</a>
                </li>
                <li class="toc-item"><a href="#children" class="toc-link"><i class="fa fa-child"></i> 儿童隐私</a></li>
                <li class="toc-item"><a href="#changes" class="toc-link"><i class="fa fa-refresh"></i> 政策变更</a></li>
                <li class="toc-item"><a href="#contact" class="toc-link"><i class="fa fa-envelope"></i> 联系我们</a></li>
            </ul>
        </aside>

        <!-- 内容区域 -->
        <div class="privacy-content">
            <div class="privacy-header">
                <h1 class="privacy-title">隐私政策</h1>
                <div class="last-updated"><i class="fa fa-calendar"></i> 最后更新日期：2023年10月20日</div>
                <p class="privacy-intro">Surreal
                    Gallery（以下简称"我们"）高度重视用户的隐私保护。本隐私政策旨在说明我们如何收集、使用、存储和保护您的个人信息，以及您对个人信息享有的权利。请在使用我们的服务前，仔细阅读并了解本隐私政策。
                </p>
            </div>

            <!-- 引言 -->
            <section id="intro" class="privacy-section">
                <h2 class="section-title"><i class="fa fa-file-text-o"></i> 1. 引言</h2>
                <div class="section-content">
                    <p>Surreal
                        Gallery是一个专注于超现实主义数字藏品的平台，我们致力于为用户提供安全、可靠的数字艺术体验。本隐私政策适用于我们通过网站、移动应用程序和其他在线服务（统称为"服务"）收集的信息。</p>
                    <p>通过使用我们的服务，即表示您同意本隐私政策中所述的信息处理实践。如果您不同意本政策的任何条款，请勿使用我们的服务。</p>
                    <div class="highlight-box">
                        <p><strong><i class="fa fa-exclamation-circle"></i>
                                重要提示：</strong>本政策仅适用于我们通过服务收集的信息，不适用于我们可能通过其他方式收集的信息，或第三方可能通过我们的服务收集的信息。</p>
                    </div>
                </div>
            </section>

            <!-- 信息收集 -->
            <section id="data-collection" class="privacy-section">
                <h2 class="section-title"><i class="fa fa-database"></i> 2. 信息收集</h2>
                <div class="section-content">
                    <p>我们收集的信息类型包括：</p>
                    <ul>
                        <li><strong><i class="fa fa-user-circle-o"></i> 账户信息：</strong>当您创建账户时，我们收集您的用户名、电子邮件地址、密码和钱包地址。
                        </li>
                        <li><strong><i class="fa fa-id-card-o"></i> 个人资料信息：</strong>您可以选择提供个人资料信息，如头像、个人简介、社交媒体链接等。</li>
                        <li><strong><i class="fa fa-exchange"></i>
                                交易信息：</strong>当您购买、出售或交易数字藏品时，我们收集交易详情，包括交易金额、时间戳和区块链交易哈希。</li>
                        <li><strong><i class="fa fa-laptop"></i> 技术信息：</strong>我们自动收集某些信息，如IP地址、浏览器类型、设备信息、操作系统和访问时间。
                        </li>
                        <li><strong><i class="fa fa-bar-chart"></i> 使用数据：</strong>我们收集您与服务的互动信息，包括浏览的页面、点击的链接和搜索查询。</li>
                        <li><strong><i class="fa fa-comments-o"></i> 通信信息：</strong>当您联系我们时，我们可能收集您的通信内容和联系方式。</li>
                    </ul>
                </div>
            </section>

            <!-- 信息使用 -->
            <section id="data-use" class="privacy-section">
                <h2 class="section-title"><i class="fa fa-cogs"></i> 3. 信息使用</h2>
                <div class="section-content">
                    <p>我们使用收集的信息用于以下目的：</p>
                    <ul>
                        <li><i class="fa fa-check"></i> 提供、维护和改进我们的服务</li>
                        <li><i class="fa fa-check"></i> 处理交易并发送相关通知</li>
                        <li><i class="fa fa-check"></i> 验证用户身份并保护账户安全</li>
                        <li><i class="fa fa-check"></i> 个性化用户体验和内容推荐</li>
                        <li><i class="fa fa-check"></i> 与用户沟通，包括发送服务更新和安全警报</li>
                        <li><i class="fa fa-check"></i> 监测和分析服务使用情况</li>
                        <li><i class="fa fa-check"></i> 检测、预防和解决技术问题和安全问题</li>
                        <li><i class="fa fa-check"></i> 遵守法律义务和执行我们的条款</li>
                    </ul>
                </div>
            </section>

            <!-- 信息共享 -->
            <section id="data-sharing" class="privacy-section">
                <h2 class="section-title"><i class="fa fa-share-alt"></i> 4. 信息共享</h2>
                <div class="section-content">
                    <p>我们不会出售您的个人信息。我们仅在以下情况下共享您的信息：</p>
                    <ul>
                        <li><strong><i class="fa fa-server"></i> 服务提供商：</strong>与帮助我们运营服务的第三方共享必要信息，如云服务提供商、支付处理商和分析服务。
                        </li>
                        <li><strong><i class="fa fa-building-o"></i> 业务转移：</strong>如果涉及合并、收购或资产出售，我们可能转移用户信息。</li>
                        <li><strong><i class="fa fa-gavel"></i> 法律要求：</strong>为遵守法律义务、响应法律程序或保护我们的权利、财产或安全。</li>
                        <li><strong><i class="fa fa-handshake-o"></i> 经您同意：</strong>在获得您明确同意的情况下共享信息。</li>
                    </ul>
                    <p><i class="fa fa-info-circle"></i> 请注意，区块链交易是公开的，您的钱包地址和交易历史可能在区块链上公开可见。</p>
                </div>
            </section>

            <!-- 数据安全 -->
            <section id="data-security" class="privacy-section">
                <h2 class="section-title"><i class="fa fa-shield"></i> 5. 数据安全</h2>
                <div class="section-content">
                    <p>我们采取合理的安全措施来保护您的个人信息免受未经授权的访问、使用或披露。这些措施包括：</p>
                    <ul>
                        <li><i class="fa fa-lock"></i> 使用加密技术保护数据传输</li>
                        <li><i class="fa fa-key"></i> 实施访问控制和身份验证程序</li>
                        <li><i class="fa fa-search"></i> 定期进行安全审计和漏洞评估</li>
                        <li><i class="fa fa-graduation-cap"></i> 对员工进行隐私和安全培训</li>
                    </ul>
                    <p><i class="fa fa-exclamation-triangle"></i> 尽管我们采取了这些措施，但请注意，互联网传输或电子存储方法都不是100%安全的。我们无法保证信息的绝对安全。
                    </p>
                </div>
            </section>

            <!-- 用户权利 -->
            <section id="user-rights" class="privacy-section">
                <h2 class="section-title"><i class="fa fa-user"></i> 6. 用户权利</h2>
                <div class="section-content">
                    <p>根据适用法律，您可能拥有以下权利：</p>
                    <ul>
                        <li><strong><i class="fa fa-eye"></i> 访问权：</strong>请求访问我们持有的关于您的个人信息。</li>
                        <li><strong><i class="fa fa-edit"></i> 更正权：</strong>请求更正不准确或不完整的个人信息。</li>
                        <li><strong><i class="fa fa-trash-o"></i> 删除权：</strong>在某些情况下请求删除您的个人信息。</li>
                        <li><strong><i class="fa fa-pause"></i> 限制处理权：</strong>请求限制对您信息的处理。</li>
                        <li><strong><i class="fa fa-download"></i> 数据可携权：</strong>请求以结构化、常用格式接收您的信息。</li>
                        <li><strong><i class="fa fa-ban"></i> 反对权：</strong>反对基于合法利益的数据处理。</li>
                    </ul>
                    <p><i class="fa fa-commenting-o"></i> 要行使这些权利，请通过本政策末尾提供的联系方式与我们联系。我们将在适用法律要求的时间内响应您的请求。</p>
                </div>
            </section>

            <!-- Cookie政策 -->
            <section id="cookies" class="privacy-section">
                <h2 class="section-title"><i class="fa fa-pie-chart"></i> 7. Cookie政策</h2>
                <div class="section-content">
                    <p>我们使用Cookie和类似技术来增强用户体验、分析服务使用情况和提供个性化内容。Cookie是存储在您设备上的小文本文件。</p>
                    <p>我们使用的Cookie类型包括：</p>
                    <ul>
                        <li><strong><i class="fa fa-exclamation-circle"></i>
                                必要Cookie：</strong>这些Cookie对于网站基本功能是必需的，无法关闭。</li>
                        <li><strong><i class="fa fa-line-chart"></i> 性能Cookie：</strong>这些Cookie帮助我们了解用户如何与网站互动，从而改进服务。
                        </li>
                        <li><strong><i class="fa fa-cog"></i> 功能Cookie：</strong>这些Cookie允许网站记住您的选择和提供增强功能。</li>
                        <li><strong><i class="fa fa-bullhorn"></i> 广告Cookie：</strong>这些Cookie用于提供相关广告和衡量广告效果。</li>
                    </ul>
                    <p><i class="fa fa-cog"></i> 您可以通过浏览器设置控制Cookie。但请注意，禁用某些Cookie可能会影响网站功能。</p>
                </div>
            </section>

            <!-- 儿童隐私 -->
            <section id="children" class="privacy-section">
                <h2 class="section-title"><i class="fa fa-child"></i> 8. 儿童隐私</h2>
                <div class="section-content">
                    <p><i class="fa fa-info-circle"></i>
                        我们的服务不面向13岁以下的儿童。我们不会故意收集13岁以下儿童的个人信息。如果您是父母或监护人，并认为您的孩子向我们提供了个人信息，请与我们联系，我们将采取措施删除此类信息。</p>
                </div>
            </section>

            <!-- 政策变更 -->
            <section id="changes" class="privacy-section">
                <h2 class="section-title"><i class="fa fa-refresh"></i> 9. 政策变更</h2>
                <div class="section-content">
                    <p>我们可能不时更新本隐私政策。如有重大变更，我们将在网站上发布通知，并在政策顶部更新"最后更新"日期。我们鼓励您定期查看本政策以了解我们如何保护您的信息。</p>
                    <p><i class="fa fa-check-circle"></i> 继续使用我们的服务即表示您接受更新后的隐私政策。</p>
                </div>
            </section>

            <!-- 联系我们 -->
            <section id="contact" class="privacy-section">
                <h2 class="section-title"><i class="fa fa-envelope"></i> 10. 联系我们</h2>
                <div class="section-content">
                    <p>如果您对本隐私政策或我们的隐私实践有任何疑问、意见或关切，请通过以下方式联系我们：</p>
                    <div class="contact-info">
                        <h3 class="contact-title"><i class="fa fa-users"></i> Surreal Gallery 隐私团队</h3>
                        <div class="contact-details">
                            <p><i class="fa fa-envelope-o"></i> 电子邮件：privacy@surrealgallery.com</p>
                            <p><i class="fa fa-globe"></i> 网站：surrealgallery.com/privacy</p>
                            <p><i class="fa fa-map-marker"></i> 邮寄地址：数字艺术中心，超现实大道123号，虚拟城市，VC 10001</p>
                        </div>
                    </div>
                    <p><i class="fa fa-clock-o"></i> 我们通常会在15个工作日内回复您的询问。</p>
                </div>
            </section>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="footer-content">
            <div class="footer-column">
                <h3>Surreal Gallery</h3>
                <p>探索超现实数字艺术的新维度，发现独一无二的数字藏品。</p>
                <div class="social-links">
                    <a href="#" class="social-link"><i class="fa fa-facebook"></i></a>
                    <a href="#" class="social-link"><i class="fa fa-twitter"></i></a>
                    <a href="#" class="social-link"><i class="fa fa-instagram"></i></a>
                    <a href="#" class="social-link"><i class="fa fa-wechat"></i></a>
                </div>
            </div>
            <div class="footer-column">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="index.html"><i class="fa fa-home"></i> 首页</a></li>
                    <li><a href="#featured"><i class="fa fa-star"></i> 特色藏品</a></li>
                    <li><a href="#artists"><i class="fa fa-paint-brush"></i> 艺术家</a></li>
                    <li><a href="news-list.html"><i class="fa fa-newspaper-o"></i> 新闻动态</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>支持</h3>
                <ul>
                    <li><a href="#"><i class="fa fa-question-circle"></i> 帮助中心</a></li>
                    <li><a href="#"><i class="fa fa-phone"></i> 联系我们</a></li>
                    <li><a href="privacy.html"><i class="fa fa-shield"></i> 隐私政策</a></li>
                    <li><a href="#"><i class="fa fa-file-text-o"></i> 服务条款</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3><i class="fa fa-newspaper-o"></i> 订阅更新</h3>
                <p>订阅我们的新闻通讯，获取最新藏品和活动信息。</p>
                <form>
                    <input type="email" placeholder="您的电子邮箱"
                        style="width: 100%; padding: 10px; margin: 10px 0; border-radius: 5px; border: none; background: rgba(255,255,255,0.1); color: white;">
                    <button type="submit" class="cta-button" style="width: 100%;"><i class="fa fa-paper-plane"></i>
                        订阅</button>
                </form>
            </div>
        </div>
        <div class="copyright">
            <p><i class="fa fa-copyright"></i> 2023 Surreal Gallery. 保留所有权利。</p>
        </div>
    </footer>

    <script>
        // 阅读进度条
        window.addEventListener('scroll', function () {
            const winHeight = window.innerHeight;
            const docHeight = document.documentElement.scrollHeight;
            const scrollTop = window.pageYOffset;
            const scrollPercent = (scrollTop) / (docHeight - winHeight) * 100;
            document.getElementById('progressBar').style.width = scrollPercent + '%';
        });

        // 目录导航高亮
        window.addEventListener('scroll', function () {
            const sections = document.querySelectorAll('.privacy-section');
            const navLinks = document.querySelectorAll('.toc-link');

            let current = '';

            sections.forEach(section => {
                const sectionTop = section.offsetTop;
                const sectionHeight = section.clientHeight;

                if (scrollY >= (sectionTop - 150)) {
                    current = section.getAttribute('id');
                }
            });

            navLinks.forEach(link => {
                link.classList.remove('active');
                if (link.getAttribute('href') === '#' + current) {
                    link.classList.add('active');
                }
            });
        });

        // 平滑滚动
        document.querySelectorAll('.toc-link').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);

                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 100,
                        behavior: 'smooth'
                    });
                }
            });
        });

        // 导航栏链接平滑滚动
        document.querySelectorAll('nav a').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                if (this.getAttribute('href').startsWith('#')) {
                    e.preventDefault();

                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);

                    if (targetElement) {
                        window.scrollTo({
                            top: targetElement.offsetTop - 80,
                            behavior: 'smooth'
                        });
                    }
                }
            });
        });
    </script>
</body>

</html>